<script setup>
	import { departmentListAPI } from '@/apis/consult.js'
	import { computed, ref } from 'vue'
	//接收父组件传过来的数据
	const props = defineProps({
		type:String,
		illnessType: String
	})
	// console.log(props,8989898)
	
	//保存科室列表
	 const departmentList = ref([])
	 //获取科室列表
	 const getdepartmentList = async() => {
		 const res = await departmentListAPI()
		 // console.log(res,11111)
		 departmentList.value = res.data
	 }
	 //调用获取科室列表函数
	 getdepartmentList()
	 
	 // 一级科室的索引值
	 const tabIndex = ref(0)
	 // 切换选择二级科室
	const onTopDeparmentClick = (index) => {
		// console.log(index)
		tabIndex.value = index
	}
	//二级科室数据
	const childDepartmentList  = computed(()=>{
		return departmentList.value[tabIndex.value]?.child
	})
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <!-- <view class="department-item active">内科</view> -->
      <view class="department-item" 
	  v-for="(item,index) in departmentList" 
	  key="item.id"  
	  @click="onTopDeparmentClick(index)" 
	  :class="{ active: tabIndex === index }"
	  >
	  {{item.name}}
	  </view>
      <view class="department-item"></view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        class="department-item"
		v-for="childDepartment  in childDepartmentList"
		:key="childDepartment.id"
		:url="`/subpkg_consult/description/index?type=${props.type}&illnessType=${props.illnessType}&depId=${childDepartment.id}`"
      >
        {{ childDepartment.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>